<!--
 * @Descripttion: 订单确认弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-27 09:27:01
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-05-24 11:09:50
-->
<template>
  <KiFormDialog
    :show.sync="form__.show"
    :title="form__.type === 'live'?'确认入住':'订单确认'"
    v-model="form__.data"
    class="form-dialog"
  >
    <template #el-form>
      <!-- <div>form__={{ form__ }}</div> -->

      <h2>入住信息</h2>
      <preview-table v-if="form__.data">
        <tr>
          <td>酒店名称</td>
          <td>{{ form__.data.hotelName }}</td>
          <td>房型名称</td>
          <td>{{ form__.data.roomTypeName }}</td>
        </tr>
        <tr>
          <td>产品名称</td>
          <td>{{ form__.data.roomName }}</td>
          <td>早餐数量</td>
          <td>
            <span v-if="form__.data.attribute">{{
              form__.data.attribute.breakFastNum
            }}</span>
          </td>
        </tr>
        <tr>
          <td>入住时间</td>
          <td>{{ form__.data.useStartTime }}</td>
          <td>离店时间</td>
          <td>{{ form__.data.useEndTime }}</td>
        </tr>
        <tr>
          <td>预订人姓名</td>
          <td>{{ form__.data.contactName }}</td>
          <td>联系电话</td>
          <td>{{ form__.data.contactPhone }}</td>
        </tr>
        <tr>
          <td>入住人姓名</td>
          <td>{{ formatPersons(form__.data.persons) }}</td>
          <td></td>
          <td></td>
        </tr>
      </preview-table>

      <h2>间夜信息</h2>
      <el-table
        v-if="form__.data && form__.data.nightInfoList"
        :data="form__.data.nightInfoList"
        border
      >
        <!-- <el-table-column align="center" type="index" /> -->
        <el-table-column label="间夜日期" prop="nightDate" align="center" />
        <el-table-column label="单价" prop="sellPrice" align="center">
          <template slot-scope="{ row }">{{
            row.sellPrice | $cent2yuan
          }}</template>
        </el-table-column>

        <el-table-column label="数量" prop="quantity" align="center" />
      </el-table>

      <h3 v-if="form__.type === 'order'">是否确认该订单？确认后将无法取消。</h3>
      <h3 v-if="form__.type === 'live'">
        是否确认顾客已入住？确认后将无法取消。
      </h3>
    </template>

    <div slot="footer" class="footer" v-if="form__.type === 'order'">
      <el-button type="danger" @click="confirmOrder(false)">
        拒绝订单
      </el-button>
      <el-button
        type="primary"
        @click="confirmOrder(true)"
        :loading="form__.loading"
      >
        确认订单
      </el-button>
    </div>
    <div slot="footer" class="footer" v-if="form__.type === 'live'">
      <el-button type="danger" @click="$set(form__, 'show', false)">
        取消
      </el-button>
      <el-button type="primary" @click="confirmLive" :loading="form__.loading">
        确认入住
      </el-button>
    </div>
  </KiFormDialog>
</template>

<script>
// import { mapGetters } from "vuex";
import previewTable from "@/components/preview-table";
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
  },
  components: { previewTable },
  // computed: {
  //   ...mapGetters(["dict", "userInfo"]),
  // },
  watch: {
    "form__.show": {
      handler(nv) {
        if (nv) {
          this.queryForDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form__: this.form,
      rejectLoading : false
    };
  },
  methods: {
    /**
     * 格式化入住人姓名
     * @param {Array} list
     * @return {String}
     */
    formatPersons(list) {
      let arr = [];
      if (list && list instanceof Array && list.length > 0) {
        list.forEach((item) => {
          arr.push(item.name);
        });
        return arr.join("、");
      } else {
        return "";
      }
    },
    /**
     * 确认/拒绝订单
     * @param {Boolean} tag
     * @return Void
     */
    confirmOrder(tag) {
      if (this.form__.loading || this.rejectLoading) {
        return false;
      }
      let url=''
      if(tag){
        this.$set(this.form__, "loading", true);
        url="sot-admin-api/hotel/self-order/confirmOrder"
      }else{
        this.rejectLoading=true
        url="sot-admin-api/hotel/self-order/refuseOrder";
      }
      this.$POST(url, {
        id: this.form__.data.orderId,
      })
        .then(({ data }) => {
          const tagText = tag ? "确认" : "拒绝";
          this.$swal.success(`${tagText}订单成功`);
        })
        .finally( evt => {
          this.$set(this.form__, "show", false);
          tag ? this.$set(this.form__, "loading", false) : this.rejectLoading=false ;
          this.$emit("change")
        });
    },
    /**
     * 获取订单详情数据
     * @return Void
     */
    confirmLive() {
      if (this.form__.loading) {
        return false;
      }
      this.$set(this.form__, "loading", true);
      this.$POST("sot-admin-api/hotel/self-order/completeOrder", {
        id: this.form__.data.orderId,
      })
        .then(({ data }) => {
          this.$set(this.form__, "show", false);
          this.$swal.success(`确认入住成功`);
        })
        .finally((_) => {
          this.$set(this.form__, "loading", false);
          this.$emit("change")
        });
    },
    /**
     * 获取订单详情数据
     * @return Void
     */
    queryForDetail() {
      this.$set(this.form__, "loading", true);
      this.$POST(`sot-admin-api/hotel/self-order/queryForDetail`, {
        id: this.form.data.orderId,
      })
        .then(({ data }) => {
          this.$set(this.form__, "data", data);
        })
        .finally((_) => {
          this.$set(this.form__, "loading", false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  h2 {
    font-size: 16px;
  }
  h3 {
    font-size: 22px;
    text-align: center;
    margin-top: 28px;
    margin-bottom: 0;
    color:#f56c6c;
  }
  .footer {
    padding-top: 28px !important;
    text-align: center !important;
  }
}
</style>
